<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #di{
            width: 200px;
            margin: auto;
        }
        span{
            float: left;
        }
        #di span:nth-of-type(3){
            display: block;
            font-size: 37px;
            color: gray;
            line-height: 37px;
            float: left;
        }
        #di span:nth-of-type(6){
            font-size: 37px;
            color: gray;
            float: left;
            line-height: 37px;
        }
    </style>
</head>
<body>
    <!-- 创建一个盒子接收 -->
    <div id="di"></div>
    <script>
        // 设定当前时间
        var date = new Date()
        render()
        // 设置定时器一秒间隔
        setInterval(function(){
            render()
        },1000)


        function render(){
        // 刷新当前时间
         date = new Date()
        //  获取当前小时
         var hours = date.getHours()
        //  获取当前分钟
         var minutes = date.getMinutes()
        //  获取当前秒
         var seconds = date.getSeconds()
        //  拼接div内容并以对应时间设置对应图片路径
         di.innerHTML = '<span id="sp"><img src="../img/' + parseInt(hours/10 )+ '.png" alt=""></span>'+
         '<span id="sp"><img src="../img/' + hours%10 + '.png" alt=""></span>'+
         '<span>:</span><span id="sp"><img src="../img/' + parseInt(minutes/10) + '.png" alt=""></span>'+
         '<span id="sp"><img src="../img/' + minutes%10 + '.png" alt=""></span>'+
         '<span>:</span><span id="sp"><img src="../img/' + parseInt(seconds/10) + '.png" alt=""></span>'+
         '<span id="sp"><img src="../img/' + seconds%10 + '.png" alt=""></span>'
        }
    </script>
</body>
</html>